<template>
  <a-modal
    :title="title"
    :visible="visible"
    :width="width"
    :cancelText="cancelText"
    :okText="okText"
    :maskClosable="maskClosable"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <template #footer>
      <a-button @click="handleCancel">{{ cancelText }}</a-button>
      <a-button v-action="permission" type="primary" :loading="confirmLoading" @click="handleOk">{{ okText }}</a-button>
    </template>

    <slot />
  </a-modal>

</template>
<script>

export default {
  props: {
    title: {
      type: String,
      default: '提示'
    },
    visible: {
      type: Boolean,
      default: false
    },
    okText: {
      type: String,
      default: "确定"
    },
    cancelText: {
      type: String,
      default: "取消"
    },
    maskClosable: {
      type: Boolean,
      default: false
    },
    width: {
      type: [String, Number],
      default: '360px'
    },
    confirmLoading: {
      type: Boolean,
      default: false
    },
    permission: {
      type: String,
      default: "*:*:*"
    }
  },
  methods: {
    handleCancel() {
      this.$emit("cancel")
    },
    handleOk() {
      this.$emit("ok")
    }
  }
}
</script>

<style lang="less" scoped>

</style>
